<template>
    <div class="registerTop">
        <!-- 主要内容 -->
        <div class="registerBottom">
            <div class="container loginInline">
                <div class="registerWrapper">
                    <div class="blockTop">
                        <div class="blockLeft">
                            <router-link to="/index"><h1>数运先锋</h1></router-link>
                            <H4>欢迎注册</H4>
                        </div>
                        <p class="blockRight">已有账号，<router-link to="/login">去登录</router-link></p>
                    </div>
                    <div class="twoLine">
                        <div class="registerBlock">
                            <el-steps :active="active" status="" finish-status="success" align-center>
                                <el-step title="选择类型"></el-step>
                                <el-step title="填写注册信息"></el-step>
                                <el-step title="注册成功"></el-step>
                            </el-steps>
                            <!-- 选择类型 -->
                            <div v-if="isActive === 'type'">
                                <div class="selectType">
                                    <el-row :gutter="20">
                                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                                            <div :class="selectVal === 'person' ? 'selectItem' : 'typeItem'"
                                                @click="hanldeClick('person')">
                                                <img src="@/assets/images/person.png" alt="">
                                                <p>个人用户</p>
                                            </div>
                                        </el-col>
                                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                                            <div :class="selectVal === 'org' ? 'selectItem' : 'typeItem'"
                                                @click="hanldeClick('org')">
                                                <img src="@/assets/images/reg.png" alt="">
                                                <p>机构用户</p>
                                            </div>
                                        </el-col>
                                    </el-row>
                                </div>
                                <div class="registerBtn">
                                    <el-button @click="next()" class="colorBtn" type="primary">下一步</el-button>
                                </div>
                            </div>
                            <!-- 企业注册 -->
                            <EnterpriseReg @hanldeResult="hanldeResult" @handleType="handleType"
                                v-if="isActive === 'enterpriseReg'" />
                            <!-- 个人注册 -->
                            <PersonReg @handleType="handleType" @hanldeResult="hanldeResult"
                                v-if="isActive === 'personReg'" />
                            <!-- 注册成功 -->
                            <RegSuccess v-if="isActive === 'result'" />
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <SimpleFooter />
    </div>
</template>
<script>
import EnterpriseReg from "@/components/register/enterpriseReg"
import PersonReg from "@/components/register/personReg"
import RegSuccess from "@/components/register/regSuccess"
import { regType } from "@/request/api/register"
import SimpleFooter from "@/components/home/simpleFooter/simpleFooter"
export default {
    components: {
        EnterpriseReg,
        RegSuccess,
        PersonReg,
        SimpleFooter
    },
    data() {
        return {
            active: 0,
            typeData: [
                {
                    name: ''
                }
            ],
            isActive: 'type',//当前步骤
            selectVal: ''//选择类型
        }
    },
    created() {
    },
    methods: {
        // 点击下一步
        next() {
            if (!this.selectVal) {
                this.$message({
                    message: '请选择注册类型！',
                    type: 'warning'
                });
                return false;
            }
            this.active = 1;
            if (this.selectVal === 'org') {
                this.isActive = 'enterpriseReg'
            } else if (this.selectVal === 'person') {
                this.isActive = 'personReg'
            }
        },
        // 点击
        hanldeClick(val) {
            this.selectVal = val
        },
        // 结果页面
        hanldeResult() {
            this.isActive = 'result'
            this.active = 3
        },
        // 选择类型页面
        handleType() {
            this.isActive = 'type'
            this.active = 0
        }
    }
}
</script>
<style lang="less" scoped>
@import "./register.less";
@import "./media.less";
</style>

